<template>
  <div class="introuce-container" :style="{background:color}">
      <div class="title">{{title}}</div>
      <div class="introduce"><slot  name="introduce"></slot></div>
      
  </div>
</template>

<script>
import { computed } from 'vue'
export default {
    name: 'Introduce',
    props:{
        title:{
          type: String
        },
        bgcolor: {
           type: String,
           default: '#FFF'
        }
    },
    setup(props){
        const color = computed(()=>{
            return props.bgcolor
        })
        return {color}
    }
}
</script>

<style lang="scss" scoped>
.introuce-container{
    background: #fff;
    margin-bottom: 25px;
    padding: 24px;
    .title{
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 12px;
    }
    .introduce{
        font-size: 14px;
    }
}
</style>